<template>
  <!-- 首页 -->
  <div class="htsy">
    <!-- 顶部 -->
    <div class="tab-list card">
      <div v-for="(item, key) in tablist" :key="key" class="list-item">
        <div class="label">{{ item.name }}</div>
        <div class="value">
          <div class="iconfont icon">
            {{ item.icon }}
          </div>
          <div class="number">{{ item.yData.c }}</div>
          <div class="hoverNum">
            <div>{{ item.left }} {{ item.yData.a }}</div>
            <div>{{ item.right }} {{ item.yData.b }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- left -->
      <div class="left">
        <!-- table -->
        <div class="card card-table">
          <div class="row">
            <div class="line"></div>
            <div class="text" style="font-size: 17px">评论线索</div>
          </div>
          <div class="table">
            <el-table
              v-if="tableHeight"
              :data="tableData"
              style="width: 100%"
              :height="tableHeight"
              class="big_table"
              tooltip-effect="light"
              row-class-name="row-class-name"
              header-row-class-name="header-row-class-name"
            >
              <el-table-column prop="comment_from" label="平台" width="80">
                <template slot-scope="scope">{{
                  platfromChange(scope.row.comment_from)
                }}</template>
              </el-table-column>
              <el-table-column
                prop="comment_author"
                label="用户"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="comment"
                label="内容"
                min-width="250"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column prop="createtime" label="时间" width="100">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- echarts -->
        <div class="card card-echart">
          <div class="row">
            <div class="line"></div>
            <div class="text" style="font-size: 17px">统计概览</div>
          </div>
          <div class="echart">
            <line-chart
              :xAxisData="xAxisData"
              :options="echartsOptions"
            ></line-chart>
          </div>
        </div>
      </div>
      <!-- right -->
      <div class="right">
        <!-- 账户信息 -->
        <div class="card card-user">
          <div class="row">
            <div class="line"></div>
            <div class="text" style="font-size: 17px">账户信息</div>
          </div>
          <div class="user">
            <img
              src="../../../assets/img/avatar.jpg"
              alt=""
              class="user-avatar"
            />
            <div class="user-info">
              <!-- <div class="user-name">{{ userInfo.username }}</div> -->
              <!-- <div class="time-login">
                <div class="label">登录时间：</div>
                <div class="value">{{ userInfo.logintime }}</div>
              </div> -->
              <div class="time-invalid" style="margin-top: 23px;">
                <div class="label">用户状态：</div>
                <div class="value">{{ "服务期内" }}</div>
                <!-- <div class="value">{{ userInfo.overtime }}</div> -->
              </div>
            </div>
            <div v-if="userInfo" class="identity" style="margin-top: 23px;">
              <div class="v">
                <div
                  v-if="
                    userInfo.taocaninfo && userInfo.taocaninfo.pushlimit == 900
                  "
                  class="iconfont icon"
                >
                  &#xe619;
                </div>
                <div
                  v-if="
                    userInfo.taocaninfo && userInfo.taocaninfo.pushlimit == 1000
                  "
                  class="iconfont icon"
                >
                  &#xe613;
                </div>
                <div
                  v-if="
                    userInfo.taocaninfo && userInfo.taocaninfo.pushlimit == 2000
                  "
                  class="iconfont icon"
                >
                  &#xe614;
                </div>
                <div
                  v-if="
                    userInfo.taocaninfo && userInfo.taocaninfo.pushlimit == 3000
                  "
                  class="iconfont icon"
                >
                  &#xe621;
                </div>
              </div>
              <div v-if="userInfo.taocaninfo" class="text">
                {{ userInfo.taocaninfo.taocan }}
              </div>
            </div>
          </div>
        </div>
        <!-- 置顶公告 -->
        <div class="card card-top">
          <div class="row">
            <div class="line"></div>
            <div class="text" style="font-size: 17px">置顶公告</div>
          </div>
          <div class="contents">
            <div class="title">{{ announ.title }}</div>
            <div v-html="announ.content" class="content">
              {{ announ.content }}
            </div>
            <div class="times">{{ format(announ.updatetime) }}</div>
          </div>
        </div>
        <!-- 系统公告 -->
        <div class="card card-system">
          <div class="row">
            <div class="line"></div>
            <div class="text" style="font-size: 17px">系统公告</div>
          </div>
          <div class="contents">
            <span
              v-for="(item, index) in system"
              :key="index"
              class="content2"
              @click="popups(item)"
              >{{ item.title }}
              <span class="overtime">{{ overtime(item.updatetime) }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统公告弹窗 -->
    <el-dialog
      :visible.sync="annpopups"
      :show-close="false"
      width="50%"
      class="elpopups"
    >
      <div class="body">
        <!-- 图标 -->
        <div class="iconfalse">
          <div class="iconfont icon" @click="annpopups = false">&#xe608;</div>
        </div>
        <!-- 公告时间 -->
        <div class="detail-time">
          <div class="details">{{ notice.type }}</div>
          <div class="times">{{ overtime(notice.updatetime) }}</div>
        </div>
        <!-- 标题 -->
        <div class="title">{{ notice.title }}</div>
        <!-- 内容 -->
        <div class="items" v-html="notice.content">{{ notice.content }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myTable from "@/components/myTable.vue";
import lineChart from "@/components/lineChart.vue";
import dayjs from "dayjs";
export default {
  components: {
    myTable,
    lineChart,
  },
  data() {
    return {
      tableData: [],
      tableHeight: 0,
      userInfo: "",
      notice: {},
      annpopups: false,
      announ: {},
      system: {},
      currentPage: 1,
      pageSize: 9,
      total: 0,
      tablist: {
        keyword: {
          name: "关键词数量",
          icon: "\ue67c",
          data: {},
          yData: {},
          left: "启用:",
          right: "待审:",
        },
        videoinfo: {
          name: "视频统计",
          icon: "\ue609",
          data: {},
          yData: {},
          left: "系统推送:",
          right: "待审:",
        },
        reply: {
          name: "评论线索",
          icon: "\ue601",
          data: {},
          yData: {},
          left: "线索剩余:",
          right: "",
        },
        account: {
          name: "平台账号",
          icon: "\ue7d3",
          data: {},
          yData: {},
          left: "启用:",
          right: "停止:",
        },
        userinfo: {
          name: "同城拓客",
          icon: "\ue610",
          data: {},
          key: "userinfo",
          yData: {},
          // left: "启用:",
          // right: "停止:",
        },
        talent: {
          name: "行业达人",
          icon: "\ue633",
          data: {},
          yData: {},
          // left: "启用:",
          // right: "停止:",
        },
      },
      echartsOptions: [
        {
          name: "视频数量",
          color: "#0480FF",
          data: [],
        },
        {
          name: "线索数量",
          color: "#2EE8DD",
          data: [],
        },
      ],
      xAxisData: [],
      timer: null,
    };
  },
  async mounted() {
    await this.getUserData();
    this.getData();
    this.announcement();
    this.navtopnumber();
    this.statistics();
    this.information();
    this.tableHeight = document.querySelector(".table").offsetHeight * 0.85;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight * 0.5;
      }, 500);
    };
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    async getUserData() {
      try {
        let res = await this.$api.htsy_getUserData();
        window.localStorage.setItem("person", JSON.stringify(res.data));
      } catch (error) {}
    },
    //分页
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
    },
    //评论线索列表
    async getData() {
      let res = await this.$api.htsy_getData({
        page: this.currentPage,
        limit: this.pageSize,
      });
      this.tableData = res.data;
      this.total = res.count;
    },
    platfromChange(val) {
      let type = [
        { name: "DY", value: "douyin" },
        { name: "KS", value: "kuaishou" },
        { name: "XHS", value: "xiaohongshu" },
        { name: "HK", value: "haokan" },
      ];
      let result = type.find((v) => v.value == val);
      return result.name;
    },
    //置顶公告 系统公告
    async announcement() {
      let ann = await this.$api.htsy_announcement({
        type: "client",
        userinfo: "client_gg",
      });

      this.announ = ann.data.top_gg;
      this.system = ann.data.system_gg;
    },
    format(time) {
      return dayjs(time * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    overtime(times) {
      return dayjs(times * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    //顶部导航条
    async navtopnumber() {
      let res = await this.$api.htsy_announcement({
        type: "client",
        userinfo: "client_top",
      });

      for (let key in this.tablist) {
        this.tablist[key].data = res.data[key];
      }
      this.tablist.keyword.yData = {
        a: res.data.keyword.qiyong,
        b: res.data.keyword.shenhe,
        c: res.data.keyword.total,
      };
      //平台账号
      this.tablist.account.yData = {
        a: res.data.account.on,
        b: res.data.account.off,
        c: res.data.account.total,
      };
      //评论线索
      this.tablist.reply.yData = {
        a: res.data.reply.push_total - res.data.reply.total,
        c: res.data.reply.total,
      };
      //视频统计
      this.tablist.videoinfo.yData = {
        a: res.data.videoinfo.talent,
        b: res.data.videoinfo.audit,
        c: res.data.videoinfo.total,
      };
      //同城拓客
      this.tablist.userinfo.yData = {
        a: res.data.userinfo.talent,
        b: res.data.userinfo.audit,
        c: res.data.userinfo.total,
      };
      //行业达人
      this.tablist.talent.yData = {
        a: res.data.talent.talent,
        b: res.data.talent.audit,
        c: res.data.talent.reply,
      };
    },
    //统计概览
    async statistics() {
      let res = await this.$api.htsy_announcement({
        type: "client",
        userinfo: "client_count",
      });
      this.xAxisData = res.data.daytimeinfo;
      this.echartsOptions[0].data = res.data.dayvideoyinfo;
      this.echartsOptions[1].data = res.data.dayreplyinfo;
    },
    //系统公告弹窗
    popups(item) {
      this.annpopups = true;
      this.notice = item;
    },
    //账户信息
    information() {
      let userInfo = JSON.parse(window.localStorage.getItem("person"));
      userInfo.logintime = dayjs(userInfo.authinfo.logintime * 1000).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      userInfo.overtime = dayjs(userInfo.overtime * 1000).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.userInfo = userInfo;
    },
  },
};
</script>

<style lang="less" scoped>
.htsy {
  width: 100%;
  height: 100%;
  padding: 52px 0 0px 0;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgb(230, 228, 228);
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #fff;
  }
}
// 顶部
.tab-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 105px;
  padding: 19px 90px;
  box-sizing: border-box;
  margin-bottom: 8px;
  .list-item {
    width: 90px;
    height: 70px;
    .label {
      font-size: 12px;
      text-align: center;
      margin-bottom: 10px;
    }
    .value {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon {
        font-size: 27px;
        color: #387cf7;
      }
      .number {
        color: #000;
        font-size: 27px;
      }
      .hoverNum {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: -20px;
        bottom: -20px;
        width: 150px;
        height: 20px;
      }
    }
  }
}
// 主体
.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .left {
    width: 50%;
    flex-shrink: 0;
    margin-right: 8px;
    .card-table {
      height: 519px;
      margin-bottom: 8px;
      .table {
        width: 100%;
        height: 100%;
        padding: 65px 0 0 0;
        box-sizing: border-box;
        /deep/ .header-row-class-name {
          height: 27px;
          th {
            padding: 0;
            background-color: rgb(240, 244, 255);
            .cell {
              text-align: center;
            }
          }
        }
        /deep/ .row-class-name {
          height: 45px;
          td {
            padding: 0px 0;
            .cell {
              text-align: center;
            }
          }
        }
        .big_table {
          .table_item {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
        }
      }
      .pageNum {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        background-color: #fff;
        /deep/ .el-pagination {
          color: #333;
        }
        /deep/ .el-pager li {
          color: #6b6b6b;
        }
        /deep/ .el-pager li.active {
          color: rgba(201, 21, 30);
        }

        /deep/ .el-pager li:hover {
          color: rgba(201, 21, 30);
        }
      }
    }
    .card-echart {
      width: 100%;
      height: 302px;
      .echart {
        width: 100%;
        height: 100%;
        padding-top: 65px;
        box-sizing: border-box;
      }
    }
  }
  .right {
    width: 50%;
    flex-shrink: 1;
    .card-user {
      width: 100%;
      height: 200px;
      margin-bottom: 8px;
      .user {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 45px;
        box-sizing: border-box;
        .user-avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: #ccc;
          object-fit: contain;
        }
        .user-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          padding: 22px 25px 20px 33px;
          box-sizing: border-box;
          .user-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 14px;
          }
          .time-login {
            display: flex;
            align-items: center;
            line-height: 25px;
            margin-bottom: 0px;
            .label {
              color: #74798b;
              font-size: 18px;
            }
            .value {
              color: #333;
              font-size: 16px;
            }
          }
          .time-invalid {
            display: flex;
            align-items: center;
            line-height: 25px;
            .label {
              color: #74798b;
              font-size: 18px;
            }
            .value {
              color: #333;
              font-size: 16px;
            }
          }
        }
        .identity {
          position: absolute;
          right: 0;
          top: 65px;
          display: flex;
          align-items: center;
          .v {
            width: 25px;
            height: 25px;
            line-height: 25px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #387cf7;
            .icon {
              color: #fff;
              font-size: 18px;
            }
          }
          .text {
            height: 25px;
            line-height: 25px;
            font-size: 13px;
            padding: 0px 7px;
            background-color: #f4f7fc;
          }
        }
      }
    }
    .card-top {
      height: 310px;
      margin-bottom: 8px;
      position: relative;
      .contents {
        padding-top: 60px;
        box-sizing: border-box;
        .title {
          text-align: center;
        }
        .content {
          text-indent: 24px;
          margin-top: 20px;
          font-size: 12px;
          line-height: 28px;
          padding: 0px 30px;
        }
        .times {
          padding-top: 20px;
          text-align: right;
          color: #74798b;
        }
      }
    }
    .card-system {
      width: 100%;
      height: 302px;
      .contents {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 60px;
        box-sizing: border-box;
        overflow: auto;
        .content2 {
          width: 100%;
          display: block;
          float: left;
          margin-top: 20px;
          font-size: 12px;
          line-height: 28px;
          padding-left: 30px;
          cursor: pointer;
          .overtime {
            float: right;
            display: block;
            text-align: right;
            color: #74798b;
          }
        }
      }
    }
  }
}
// 卡片里的标题
.row {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 0;
  .line {
    width: 4px;
    height: 15px;
    margin-right: 8px;
    background-color: #387cf7;
  }
}

//系统公告弹窗
.elpopups {
  /deep/ .el-dialog {
    border-radius: 20px !important;
  }
}
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0px 0px;
    .body {
      border-radius: 10px;
      background-color: #fff;
      border: 2px solid #387ef7;
      box-sizing: border-box;
      position: relative;
      color: #333;
      .iconfalse {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #f4f7fc;
        position: absolute;
        top: -16px;
        right: -16px;
        .icon {
          font-size: 24px;
          padding: 30% 25%;
          font-weight: bold;
          color: rgb(219, 219, 219);
          cursor: pointer;
        }
      }
      .detail-time {
        display: flex;
        justify-content: space-between;
        padding: 50px 70px 0px 50px;
      }
      .title {
        width: 80%;
        padding: 40px 0 20px 0px;
        border-bottom: 1px solid #387ef7;
        margin: 0 auto;
        text-align: center;
      }
      .items {
        height: 400px;
        font-size: 12px;
        padding: 23px 73px 20px 53px;
        line-height: 20px;
        overflow-y: hidden;
        overflow-y: auto;
      }
    }
  }
}
</style>
